<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="../../header.jsp"%>

<style type="text/css">
#taskList li {
	width: 140px;
	white-space:nowrap;
	text-overflow:ellipsis; 
	-o-text-overflow:ellipsis; 
	overflow: hidden;
}
</style>

<div class="left ">
<div class="border bg">
<div class="page-header">
<h2>鸟瞰图</h2>
<div class="cms_toolbar">
	<a href="javascript:;" onclick="fullScreen()" class="btn"><i class="icon-stop"></i>全屏</a>
	<a href="javascript:;" onclick="normalScreen()" class="btn btn-danger hide" title="退出全屏" id="normalBtn"><i class="icon-remove"></i></a>
</div>
</div>

<div id="mapContainer">
	<div id="mapQuery" class="border">
		<ul class="nav nav-tabs" id="myTab">
			<li class="active"><a href="#queryDiv" data-toggle="tab">查询</a></li>
			<li><a href="#resultDiv" data-toggle="tab">结果</a></li>
		</ul>
		<div class="tab-content">
			<div class="tab-pane active text-center" id="queryDiv">
				定位时间
				<input type="text" name="locateStartDate" id="locateStartDate" class="input-small" readonly="readonly" value="${locateStartDate}" />
				<input type="text" name="locateEndDate" id="locateEndDate" class="input-small" readonly="readonly" value="${locateEndDate}" />
				<input type="hidden" name="projectId" id="projectId" value="${projectId}" />
				<input type="text" name="projectName" id="projectName" value="${projectName}" class="input-small" readonly="readonly" onclick="selectProject()" placeholder="请选择项目..."/>
				<input type="text" name="executor" id="executor" class="input-small" readonly="readonly" onclick="selectExecutor()" placeholder="请选择部门或人员..."/>
				<button class="btn" onclick="refresh()">查询</button>
			</div>
			<div class="tab-pane" id="resultDiv">
				<h4 class="text-center">查询结果(<span id="currentCount">0</span>/<span id="totalCount">0</span>页)</h4>
				<ul id="taskList" style="margin-left: 5px;">
				</ul>
				<div class="btn-group">
					<a class="btn disabled" id="previousPageBtn" href="javascript:previousPage();"><i class="icon-backward"></i>上一页</a>
					<a class="btn disabled" id="nextPageBtn" href="javascript:nextPage();"><i class="icon-forward"></i>下一页</a>
				</div>
			</div>
		</div>
	</div>
	<div id="mapContent" class="border">
	</div>
</div>

</div>
</div>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=tmKLDQePokgC7m0EyDmIYFal"></script>
<script type="text/javascript">
var pageIndex = 0, pageSize = 20, pageCount = 0, currentCount = 0, totalCount = 0;
var map = null;
var defaultCenter = new BMap.Point(104.072153, 30.664483);

function fullScreen() {
	$("body").css("overflow", "hidden");
	$("#mapContainer").css("position", "fixed");
	$("#mapContainer").css("z-index", 999);
	$("#mapContainer").css("left", 0);
	$("#mapContainer").css("top", 0);
	$("#mapContainer").css("width", $(window).width() - 150);
	$("#mapContainer").css("height", $(window).height());
	
	$("#mapQuery").css("height", $(window).height());
	$("#mapContent").css("height", $(window).height());
	
	$("#normalBtn").css("position", "fixed");
	$("#normalBtn").css("z-index", 1000);
	$("#normalBtn").css("top", 0);
	$("#normalBtn").css("left", $(window).width() - $("#normalBtn").outerWidth());
	$("#normalBtn").show();
}

function normalScreen() {
	$("body").css("overflow", "auto");
	$("#mapContainer").css("position", "static");
	$("#mapContainer").css("width", "auto");
	$("#mapContainer").css("height", 500);
	
	$("#mapQuery").css("height", 500);
	$("#mapContent").css("height", 500);
	
	$("#normalBtn").hide();
}

function selectProject() {
	$.openDialog("#dialog",
			{height:550,
			width:800,
			minHeight:450,
			minWidth:600,
			loadPage:ctx + "/biz/project/query.do",
			title:"选择项目"},
			function(data) {
				$("#projectId").val(data.id);
				$("#projectName").val(data.name);
			});
}

function selectExecutor() {
	$.openDialog("#dialog",
			{height:350,
			width:300,
			minHeight:350,
			minWidth:300,
			loadPage:ctx + "/biz/system/user/tree_single.jsp",
			title:"选择部门或人员"},
			function(data) {
				$("#executor").data("id",data.data("id"));
				$("#executor").data("type",data.data("type"));
				$("#executor").val(data.data("name"));
			});
}

function getParameter(){
	return {
		start: pageIndex,
		limit: pageSize,
		status: "completed",
		execPersonId: $("#executor").data("type") == "user" ? $("#executor").data("id") : "",
		execOrganId: $("#executor").data("type") == "organ" ? $("#executor").data("id") : "",
		locateStartDate: $("#locateStartDate").val(),
		locateEndDate: $("#locateEndDate").val(),
		projectId: $("#projectId").val(),
		name: $("#name").val()
	};
}

function count(){
	block("#mapQuery", "正在加载数据...");
	$.ajax({
    	type: "GET",
    	cache: false,
    	url: ctx + "/biz/task/count.json",
    	data: getParameter(),
    	dataType:"json",
    	success:function(json) {
    		unblock("#mapQuery");
    		if (!json.succeed) {
    			$.alert(json.message);
    			return;
    		}
    		totalCount = json.data;
    		if (totalCount % pageSize == 0) {
    			pageCount = totalCount / pageSize;
    		} else {
    			pageCount = Math.floor(totalCount / pageSize) + 1;
    		}
			$("#totalCount").text(pageCount);
			list();
    	},
		error: function(message) {
			unblock("#mapQuery");
			$.alert(message);
		}
	});
}

function list(){
	map.clearOverlays();	//清除已有地图标注
	block("#mapQuery", "正在加载数据...");
	if (pageIndex > 0) {
		$("#previousPageBtn").removeClass("disabled");
	}
	if (pageCount > 0 && (pageIndex < pageCount - 1)) {
		$("#nextPageBtn").removeClass("disabled");
	}
	if (totalCount == 0) {
		$("#currentCount").text(0);
	} else {
		$("#currentCount").text(pageIndex + 1);
	}

	$.ajax({
    	type: "GET",
    	cache: false,
    	url: ctx + "/biz/task/list.json",
    	data: getParameter(),
    	dataType:"json",
    	success:function(json) {
    		unblock("#mapQuery");
    		if (!json.succeed) {
    			$.alert(json.message);
    			return;
    		}
			buildList(json.data);
    	},
		error: function(message) {
			unblock("#mapQuery");
			$.alert(message);
		}
	});
}

function refresh(){
	$('#myTab a[href="#resultDiv"]').tab('show'); 
	
	pageIndex = 0;
	pageCount = 0;
	currentCount = 0;
	totalCount = 0;
	
	$("#currentCount").text(pageIndex);
	$("#totalCount").text(pageCount);
	$("#taskList").html("");
	$("#previousPageBtn").addClass("disabled");
	$("#nextPageBtn").addClass("disabled");
	count();
	//list();
}

function nextPage(){
	$("#nextPageBtn").addClass("disabled");
	if (pageCount == 0 || (pageIndex >= pageCount - 1)) {
		return;
	}
	pageIndex++;
	list();
}

function previousPage(){
	$("#previousPageBtn").addClass("disabled");
	if (pageIndex <= 0) {
		return;
	}
	pageIndex--;
	list();
}

function buildList(data){
	if(data.length == 0){
		return;
	}
	currentCount += data.length;
	
	
	map.centerAndZoom(computeCenterPoint(data), 15);
	$("#taskList").html("");
	$(data).each(function(index, item) {
		var itemIndex = pageSize * pageIndex + index + 1;
		$("#taskList").append('<li><a href="javascript:;">' + itemIndex + '.' + item.name + '</a></li>');
		if (item.longitude == null || item.latitude == null) {
			$("#taskList li").last().bind("click", function(){
				$.alert("此任务没有位置信息。");
			});
		} else {
			var newPoint = new BMap.Point(item.longitude, item.latitude);
			while (true) {
				if (map.getZoom() <= 1) {
					break;
				}
				if (map.getBounds().containsPoint(newPoint)) {
					break;
				} else {
					map.zoomOut();
				}
			}
			
			map.getBounds().extend(new BMap.Point(item.longitude, item.latitude));
			var marker = createMarker(item, itemIndex);
			$("#taskList li").last().bind("click", function(){
				marker.openInfoWindow(createInfoWindow(item, itemIndex));
			});
		}
	});
}

function computeCenterPoint(items) {
	if (!items) {
		return defaultCenter; 
	}
	
	var minmax = {
		minLng: null,
		minLat: null,
		maxLng: null,
		maxLat: null
	};
	$(items).each(function(index, item) {
		if (item.longitude == null || item.latitude == null) {
			return;
		}
		if (minmax.minLng == null) {
			minmax.minLng = item.longitude;
			minmax.minLat = item.latitude;
			minmax.maxLng = item.longitude;
			minmax.maxLat = item.latitude;
		} else {
			if (minmax.minLng > item.longitude) {
				minmax.minLng = item.longitude;
			}
			if (minmax.minLat > item.latitude) {
				minmax.minLat = item.latitude;
			}
			if (minmax.maxLng < item.longitude) {
				minmax.maxLng = item.longitude;
			}
			if (minmax.maxLat < item.latitude) {
				minmax.maxLat = item.latitude;
			}
		}
	});
	
	if (minmax.minLng == null) {
		return defaultCenter;
	}
	
	var midLng = (minmax.minLng + minmax.maxLng) / 2;
	var midLat = (minmax.minLat + minmax.maxLat) / 2;
	return new BMap.Point(midLng, midLat);
}

function createMarker(item, index) {
	var pt = new BMap.Point(item.longitude, item.latitude);
	//var myIcon = new BMap.Icon(ctx + "/images/map/pin-blue.png", new BMap.Size(32,32));
	var marker2 = new BMap.Marker(pt);  // 创建标注
	marker2.setTitle(index + "." + item.name);
	map.addOverlay(marker2);              // 将标注添加到地图中
	marker2.addEventListener("click", function(){
		this.openInfoWindow(createInfoWindow(item, index));
	});
	return marker2;
}

function createInfoWindow(item, index) {
	var html = "<p><strong><a target='_blank' href='detail.do?id=" + item.id + "'>" + index + "." + item.name + "</a></strong></p>";
	html = html + "<p>经度:" + item.longitude + ", 纬度:" + item.latitude + "</p>";
	html = html + "<p>" + item.locationAddress + "</p>";
	return new BMap.InfoWindow(html);
}

$(document).ready(function() {
	//$("#taskPlanStartDate").datepicker();
	$("#locateStartDate").datepicker();
	$("#locateEndDate").datepicker();
	
	map = new BMap.Map("mapContent");
	map.centerAndZoom(defaultCenter, 15);
	//map.centerAndZoom("成都",15);
	//map.setZoom(12);
	map.enableScrollWheelZoom();    //启用滚轮放大缩小
	map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
	map.addControl(new BMap.ScaleControl());    // 添加默认比例尺控件
	
	refresh();
});

</script>

<%@ include file="../../footer.jsp"%>